<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
</head>
<body>
<div id="app">
    <template>
        <!--占位子-->
        <div id="monitorZhuZhe" style="width: 600px;height:400px;"></div>
        <div style="width: 100%;height: 300px" id="monitorBing"></div>
    </template>
</div>
</body>
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/echarts.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {

            }
        },
        mounted() {
            //页面加载完毕
            var myChart = echarts.init(document.getElementById('monitorZhuZhe'));//main 中放了一个折线图和柱状图
            let myChart1 = echarts.init(document.getElementById("monitorBing"));

            var charOption;
            charOption = {
                xAxis: {
                    type: 'category',
                    data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    },
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar'
                    }
                ]
            };
            var optionchartZhu = {
                title: {
                    text: '商品订单'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'bar', //柱状
                    data: [100,150,120,100,120,150,100],
                    itemStyle: {
                        normal: { //柱子颜色
                            color: 'red'
                        }
                    },
                },{
                    name:'产量',
                    type:'bar',
                    data:[110,160,130,110,130,160,110],
                    itemStyle:{
                        normal:{
                            color:'blue'
                        }
                    }
                }]
            };

            myChart.setOption(charOption)
            myChart1.setOption(optionchartZhu)
        },
        methods: {
        },
    })
</script>
</html>